<template>
    <div>
        <div class="mui-card">
            <div class="mui-card-header mui-card-media">
                <img src="../../images/menu1.png"/>
                <div class="mui-media-body">
                    小M
                    <p>发表于 2016-06-30 15:30</p>
                </div>
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="title">{{newsInfor.title}}</p>
                    <p style="color: #333;" v-html="newsInfor.content"></p>
                </div>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link">喜欢</a>
                <a class="mui-card-link" @click.prevent="commentFlag=!commentFlag">展开评论</a>
                <a class="mui-card-link">更多</a>
            </div>
        </div>
       <comment-box v-if="commentFlag" :getcommetId="id"></comment-box>
    </div>
</template>

<script>
    import CommentComponent from '../publicComponents/comment.vue'

    export default {
        data: function () {
            return {
                id: this.$route.params.id,
                newsInfor: {},
                commentFlag:false,
            }
        },
        methods: {
            getNewsInfor() {
                this.$http.get(`http://www.liulongbin.top:3005/api/getnew/${this.id}`).then(data => {
                    this.newsInfor = data.body.message[0];
                })
            },
        },
        created() {
            this.getNewsInfor();
        },
        components: {
            "commentBox": CommentComponent   //这里注意，CommentComponent已经是一个组件模板对象了
        }
    }
</script>

<style scoped>
    .title {
        width: 100%;
        text-align: center;
        color: #333;
        font-weight: bold;
    }
</style>
